<template>
  
     <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>新增班级</span>
      <el-button style="float: right; padding: 3px 0" type="text"></el-button>
    </div>

    <div>
      <el-form ref="form" :model="classes" label-width="100px" class="add"> 
<!------------------------ 选择专业 ----------------------->
        <el-form-item label="专业">
          <el-select v-model="classes.subjectsId" placeholder="请选择">
            <el-option v-for="item in subjects" :key="item._id" :label="item.name" :value="item._id">
            </el-option>
          </el-select>
        </el-form-item>
<!----------------------- 输入班级名称 ---------------------->
        <el-form-item label="班级名称：">
          <el-input v-model="classes.name"></el-input>
        </el-form-item>   
<!-- ----------------------选择班主任------------------------>
        <el-form-item label="班主任">
          <el-select v-model="classes.directorsId" placeholder="请选择">
            <el-option v-for="item in directors" :key="item._id" :label="item.name" :value="item._id">
            </el-option>
          </el-select>
        </el-form-item>
<!------------------------- 立即新增 ------------------------->
        <el-form-item>
          <el-button type="primary" @click="addClassesOne">立即新增</el-button>
          <el-button>取消</el-button>
        </el-form-item>

      </el-form>
    </div>
  </el-card>

 


</template>

<script>
  import api from '../../../modules/api.js';
  import {createNamespacedHelpers} from 'vuex';
  const { mapActions:subjectsAction } = createNamespacedHelpers('Subjects');
  const { mapActions} = createNamespacedHelpers('Classes');

  export default {
    data() {
      return {
        //-----------------------------------新增的学生信息------------------------------------
        classes: {
          name: '',
          subjectsId:'',
          directorsId:'',
        },
        //-----------------------------------班级列表信息--------------------------------------
        directors: [],
        //----------------------------------专业列表信息-----------------------------------
        subjects:[],
      }
    },
    async mounted() {
      //-----------------------------获取班主任列表--------------------------
      this.getDirectorsList();
      //-----------------------------获取专业列表----------------------------
      this.getSubjectsList();
      
    },
    methods: { 
      ...subjectsAction(['getSubjects']),
      ...mapActions(['addClasses']),
      //-----------------------------获取专业信息----------------------------
      async getSubjectsList(){
        const data = await this.getSubjects();
        this.subjects = data.data.result
      },
      //-----------------------------获取班主任信息--------------------------
      async getDirectorsList(){
          const data = await api.directors.getDirectors();
          //-----------将后端响应的数据赋值给渲染列表---------------------------
          this.directors = data.data.result   
      },
      //----------------------------新增班级信息------------------------------
       async addClassesOne() {
          const data = await this.addClasses(this.classes);
          console.log(data);
          if(data.code){
             this.$message({
              message: '新增成功',
              type: 'success'
            });
            this.$router.push('/home/classesList')
          }else {
            this.$message({
              message: '网络错误，新增失败',
              type: 'success'
            });
          }
      },
    },
    
  }
</script>

<style scoped>
  .add {
    margin: 50px;
    width: 400px;
  }

  .avatar-uploader {
    border: 1px dotted #ccc;
    width: 178px;
    height: 178px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;

  }
  .box-card{
    position: relative;
    text-align: left;
  }
  
  .clearfix{
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: 600;
  }
  .el-select{
    width: 300px;
  }
</style>